<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>表单输入绑定</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
        <div>text值: {{text}}</div>
        <div>
         :value + @input = <input v-bind:value="text" @input="event => text = event.target.value"/>
        </div>
        <!--:value + @input 等价于 v-model-->
        <div>
            v-model = <input v-model="text"/>
        </div>

        <div>
            <span>2、多行文本 textarea:{{message}}</span>
            <textarea v-model="message" placeholder="请输入多行文本！"></textarea>
        </div>

        <div>
            <span>3、单个复选框(初始值只接收布尔类型true/false两个选项) checkbox:{{ checked }}</span>
            <input type="checkbox" v-model="checked"/>
        </div>

        <div>
            <span>4、多个复选框(绑定的响应式状态数据类型必须是数组Array) checkedNames:{{checkedNames}}</span>
            <div>
                <label>Jack</label><input type="checkbox" v-model="checkedNames" value="Jack"/>
                <label>John</label><input type="checkbox" v-model="checkedNames" value="John"/>
                <label>Mike</label><input type="checkbox" v-model="checkedNames" value="Mike"/>
            </div>
        </div>

        <div>
            <span>5、单选按钮 radio,gender: {{gender}}</span>
            <div>
                <label>男</label><input type="radio" v-model="gender" value="1"/>
                <label>女</label><input type="radio" v-model="gender" value="0"/>
            </div>
        </div>
        <div>
            <span>6、下拉框(v-model所绑定的值为option元素的value属性值，如没有定义value属性，则取option标签体中的内容)select,
                已选:{{ selected }}</span>
            <div>
                <select v-model="selected">
                    <option value="">-请选择-</option>
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </div>
            <div>
                <div>已选市:{{city}}</div>
                <select v-model="city">
                    <option value="">--请选择所在市--</option>
                    <option v-for="city in citys" :value="city.code">{{city.name}}</option>
                </select>
            </div>
        </div>
        <!--值绑定-->
        <div>
            <p style="color: red;">二、值绑定</p>
            <div>
                <div>1、单选按钮 pick:{{pick}}</div>
                <input type="radio" v-model="pick" :value="first"/>
                <input type="radio" v-model="pick" :value="second"/>
            </div>
            <div>
                <div>2、复选框 toggle:{{toggle}}， true-value="yes" false-value="no"</div>
                <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"/>
                <input type="checkbox" v-model="toggle" :true-value="first" :false-value="second"/>
            </div>
            <div>
                <div>3、下拉框, role:{{role}}</div>
               <select v-model="role">
                 <option value="">---请选择角色---</option>
                 <option value="admin">管理员</option>
                 <option :value="userRole">普通用户</option>
               </select>
            </div>
        </div>
        <!--修饰符-->
        <div>
            <p style="color: red;">三、修饰符 .lazy .number .trim</p>
            <div>
                <div>1、 .lazy修饰符  msg:{{msg}}</div>
                <input v-model.lazy="msg"/>
            </div>
            <div>
                <div>2、 .number修饰符  age:{{age}} - {{typeof(age)}}</div>
                <input v-model.lazy="age"/>
            </div>
            <div>
                <div>1、 .trim修饰符  msg: ={{msg}}=</div>
                <input v-model.trim="msg"/>
            </div>
        </div>
        </div>

    </body>
    <script>
        //Vue.createApp({/*根组件选项});
        //选项式API
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
               text: ' ' ,  
               message: '',
               checked :true,
               checkedName :[],
               gender: '0',
               selected: 'D',
               city:'640200',
               citys: [{name: '银川市', code: '640100'}, {name: '吴忠市', code: '640200'}, {name: '石嘴山', code: '640300'},],
               pick: '',
               first: 'no',
               second: 'yes',
               toggle: '',
               role: '',
               userRole: 'user',
               msg:'',
               age:'',
            }
           }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>